<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chat</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        .header{
            display: flex;
            justify-content: space-between;
            padding: 6px;

            background: rgba(150, 125, 110, 0.9);
            height: 34px;
            width: 580px;
            margin-left: auto;
            margin-right: auto;
        }

        .chat-name-lbl{
            font-style: normal;
            font-weight: 400;
            font-size: 15px;
            line-height: 18px;
            color: #FFFFFF;
        }

        .sign-in-button{
            width: 72px;
            height: 24px;

            background: #CCBFB4;
            border: 1px solid rgba(0, 0, 0, 0.6);
            box-sizing: border-box;
            border-radius: 5px;

            text-align: center;
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 15px;
            color: rgba(0, 0, 0, 0.75);
        }

        .sign-in-panel{
            width: 580px;
            height: 386px;

            background: #CCBFB4;
            margin-left: auto;
            margin-right: auto;
            /*border: 1px solid #000000;*/
        }

        .info-message-form{
            padding-top: 10px;
            text-align: center;
            color: rgba(0, 0, 0, 0.75);
            width: 280px;
            height: 49px;

            border: 1px solid #967D6E;
            box-sizing: border-box;
            border-radius: 13px;
        }

        .sign-in-panel-items{
            padding-top: 82px;
            display: flex;
            justify-content: center;
        }

        .sign-in-panel-text {
            padding-top: 8px;
            text-align: center;

            font-weight: 400;
            font-size: 12px;
            line-height: 15px;

            color: rgba(0, 0, 0, 0.75);
        }

        .input{
            width: 160px;
            height: 28px;

            background: #FFFFFF;
            border-radius: 10px;
            border-width: 0;
        }

        .sign-out-button{
            width: 160px;
            height: 28px;

            margin-top: 15px;
            background: rgba(166, 155, 146, 0.9);
            border: 1px solid rgba(0, 0, 0, 0.3);
            box-sizing: border-box;
            border-radius: 10px;
        }

        .container-info-message-form{
            padding-top: 36px;
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
<header class="header">
    <label class="chat-name-lbl">
        Anonymous Chat
    </label>
    <button onclick="document.location='/login'" class="sign-in-button">
        Sign in
    </button>
</header>

<div class="sign-in-panel">
    <div class= "sign-in-panel-items">
        <form class="form-signout" action="#" th:action="@{/registration}" th:object="${registrationDto}" method="post"  >
            <div class="">
                <div class="sign-in-panel-text">
                    Login:
                </div>
                <div>
                    <input type="text" th:name="login" class="input" th:field="${registrationDto.username}" required autofocus>
                </div >
                <div class="sign-in-panel-text">
                    Password:
                </div>
                <div >
                    <input type="password" th:name="password" class="input" th:field="${registrationDto.password}" required>
                </div>
                <div class="sign-in-panel-text">
                    Password repeat:
                </div>
                <div >
                    <input type="password" th:name="password-repeat" class = "input" th:field="${registrationDto.repeatPassword}" required autofocus>
                </div>
                <div>
                    <button class="sign-out-button">
                        Sign up
                    </button>
                </div>
            </div>
        </form>
    </div>

    <div class="container-info-message-form">
        <div class="info-message-form" th:if="${info.error}">
            <p th:text="${info.message}" />
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>

